<template>
	<view class="image-box">
		<view class="img-list" v-if="mode === '1'">
			<image class="img-item" mode="aspectFill" lazy-load v-for="(img,index) in dataList" :key="index" :src="img"
				@click="$event.previewMedia(img,dataList)" :show-menu-by-longpress="true"></image>
		</view>
		<view class="img-list" v-if="mode === '2'">
			<video class="img-item" v-for="(video,index) in dataList" :key="index" :src="video" mode=""></video>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 数据列表
			dataList: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 1=图片；2=视频
			mode:{
				type: String,
				default:'1'
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="less">
	.image-box {
		.img-list {
			// padding: 16rpx 0;
			// display: flex;
			// flex-wrap: wrap;
			margin-top: 16rpx;

			.img-item {
				display: inline-block;
				width: 220rpx;
				height: 220rpx;

				&:only-child {
					width: 400rpx;
					height: 380rpx;
					border-radius: 20rpx;
				}

				&:nth-child(3n + 1):nth-last-child(2),
				&:nth-child(3n + 2):last-child {
					width: 336rpx;
					height: 350rpx;
				}

				&:nth-child(3n + 2) {
					margin: 0 12rpx;
				}

				&:nth-child(n + 4) {
					margin-top: 12rpx;
				}

				&:first-child {
					border-top-left-radius: 20rpx;
				}

				&:last-child {
					margin-right: 0;
					border-bottom-right-radius: 20rpx;
				}

				&:nth-child(3n + 1) {

					&:last-child,
					&:nth-last-child(2),
					&:nth-last-child(3) {
						border-bottom-left-radius: 20rpx;
					}
				}

				&:nth-child(2):last-child,
				&:nth-child(3) {
					border-top-right-radius: 20rpx;
				}

				&:nth-child(2):nth-last-child(3) {
					margin-right: 40rpx;
				}

				&:nth-child(2):nth-last-child(3) {
					border-top-right-radius: 20rpx;
				}

				&:nth-child(3):nth-last-child(2) {
					margin-top: 12rpx;
					margin-right: 12rpx;
					border-radius: 0 0 0 20rpx;
				}

				&:nth-child(4):last-child {
					border-radius: 0 0 20rpx 0;
				}

			}

			&>view {
				width: 100%;
			}
		}
	}
</style>